<!--
 * @FileDescription: 下级代理商
 * @Author: zsf
 * @Date: 2021-04-19 22:44:21
 * @LastEditors: zsf
 * @LastEditTime: 2021-05-03 14:32:29
-->
<template>
  <div id="subordinate-agents">
    <PathMenu :pathArr="pathArr"></PathMenu>

    <!-- 搜索表单 -->
    <div class="form">
      <a-form-model :model="form" layout="inline">
        <a-form-model-item label="代理商姓名：" prop="name">
          <a-input size="large" v-model="form.name"  placeholder="请输入" allow-clear class="w-300" />
        </a-form-model-item>
        <a-form-model-item label="注册时间：" prop="regTime">
          <a-range-picker v-model="form.regTime" size="large" :placeholder="['请选择', '请选择']" allow-clear/>
        </a-form-model-item>
        <a-form-model-item label="注册地区：" prop="regArea1">
          <div class="flex-start">
            <div  class="w-186 m-r-20" >
              <a-select v-model="form.regArea1" :options="regAreaOptions1" size="large" allow-clear ></a-select> 
            </div>
            <div  class="w-186 m-r-20" >
              <a-select v-model="form.regArea2" :options="regAreaOptions2" size="large" allow-clear></a-select>
            </div>
            <div  class="w-186" >
              <a-select v-model="form.regArea3" :options="regAreaOptions2" size="large" allow-clear ></a-select>
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="状态：" prop="state">
          <a-input v-model="form.state" size="large" allow-clear placeholder="请输入" class="w-300"/>
        </a-form-model-item>
        <a-form-model-item label="招募方式：" prop="way">
          <a-input v-model="form.state" size="large" allow-clear placeholder="请输入" class="w-300"/>
        </a-form-model-item>
        <a-form-model-item>
          <a-space>
            <a-button type="primary" size="large" @click="search"> 查询 </a-button>
            <a-button class="antd-button-FFA715" size="large"> 导出 </a-button>
          </a-space>
        </a-form-model-item>
      </a-form-model>
    </div>

    <!-- table表格 -->
    <a-table bordered :data-source="dataSource" :columns="columns" size="middle" :pagination="pagination" @change="tableChange" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
      <template slot="operation" slot-scope="text, record">
        <a @click="operation(record)">招募</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import tableForm from 'mixins/tableForm.js';
import { get7Data } from "@/utils/tool.js";
export default {
  mixins: [tableForm],
  data() {
    return {
      pathArr: [
        {
          name: "首页",
        },
        {
          name: "我的下级",
        },
        {
          name: "代理商",
        },
      ],
      form: {
        name: '',
        regTime: get7Data(),
        regArea1: '',
        regArea2: '',
        regArea3: '',
        state: '',
        way: ''
      },
      regAreaOptions1: [
        {
          label: "广东省1",
          value: "gd1"
        },
        {
          label: "广东省",
          value: "gd2"
        }
      ],
      regAreaOptions2: [
        {
          label: "广东省3",
          value: "gd3"
        },
        {
          label: "广东省4",
          value: "gd4"
        }
      ],
      regAreaOptions3: [
        {
          label: "广东省5",
          value: "gd5"
        },
        {
          label: "广东省6",
          value: "gd6"
        }
      ],
      columns: [
        { title: '手机号', dataIndex: 'phone', },
        { title: '商家名称', dataIndex: 'address1', },
        { title: '账号状态', dataIndex: 'address2', },
        { title: '注册时间', dataIndex: 'address3', },
        { title: '注册地区', dataIndex: 'address4', },
        { title: '招募费用', dataIndex: 'address5', },
        { title: '操作', dataIndex: 'operation', scopedSlots: { customRender: 'operation' } },
      ],
    };
  },
  methods: {
    
  },
};
</script>

<style lang="less" scoped>
#subordinate-agents {
  margin: 20px;
}
</style>